<template>
  <div class="ifcover">
    <div class="bar">
      <div class="l">快讯</div>
      <ul class="r">
        <li v-for="(item, index) in infolist" :key="index">
          <span class="title">{{ item.title }}</span>
          <span class="time">{{ item.time }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 此行导入其他文件（如组件，工具js，第三方插件js，json文件，图片文件等）
export default {
  name: "InfoCover",
  props: {},
  components: {},
  data() {
    return {
      infolist: [
        { title: "泊天健康天河店成功开业！", time: "2021-4-23" },
        { title: "泊天健康天河店成功开业！", time: "2021-4-23" },
        { title: "广州泊天健康管理有限公司于4月17日正式", time: "2021-4-23" },
        { title: "广州泊天健康管理有限公司于4月17日正式", time: "2021-4-23" },
      ],
    };
  },
  computed: {},
  methods: {},
};
</script>

<style scoped>
/* @import url(); 引入公共css类 */
.ifcover {
  width: 7.5rem;
  height: 3.11rem;
  color: #fff;
  position: relative;
  background-image: url("http://placehold.it/750x311/0C5DA9/0c5da9");
}
.ifcover .bar {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 7.5rem;
  height: 0.52rem;
  background-color: rgba(0, 0, 0, 0.5);
}
.ifcover .bar .l {
  margin-left: 0.35rem;
  margin-right: 0.14rem;
  width: 0.56rem;
}
.ifcover .bar .r {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.12rem;
  width: 5.92rem;
}
.ifcover .bar .r li {
  width: 2.6rem;
  height: 0.26rem;
  line-height: 0.26rem;
  margin-right: 0.36rem;
}
.ifcover .bar .r li .title {
  display: inline-block;
  width: 1.98rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ifcover .bar .r li .time {
  float: right;
}
</style>
